<template>
  <div>
    <el-dialog
      title="搜索"
      v-model="drawer"
      width="30%"
      style="height: 50%"
      :before-close="handleClose"
    >
      <el-input
        placeholder="请输入内容"
        prefix-icon="Search"
        v-model="input2"
        :clearable="true"
        @clear="clearable"
        @change="search"
      >
        <template #append>
          <el-button
            type="primary"
            icon="Search"
            @click="search"
            style="background-color: #409eff; color: #ffffff"
            >搜索</el-button
          >
        </template>
      </el-input>
      <div class="constTitle">
        <span class="content-ts">搜索结果</span>
        <span class="title">搜索到</span>
        <span class="content-ts">" {{ input2 }} "</span>
        <span class="title">相关功能{{ MentuList.length }}个</span>
      </div>
      <div id="menus">
  <div
        v-for="item in MentuList"
        :key="item.id"
        v-html="highlightKeywords(item.name)"
        @click="Clickmenu(item)"
        class="menus"
      ></div>
      </div>
    
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
	getCurrentInstance
	} from "vue";
const {proxy} = getCurrentInstance();
import bus from "@/mitt";
import  router  from '/src/router/index'
// const router = useRoute();

// 定义响应式变量
const drawer = ref(false);
const input2 = ref("");
const MentuList = ref([]);

//输入框清空
const clearable = () => {
  input2.value = "";
  MentuList.value = [];
};

bus.on("header_rigth", (res) => {
  drawer.value = res;
});
//菜单查询
const search = () => {
  const params = JSON.parse(sessionStorage.getItem("NavList"));
  const value = input2.value;
  const titlesContainingKeyword = []; // 清空搜索结果数组

  const result = extractTitles(params, value);

  MentuList.value = result;
};

//筛选菜单重组
const extractTitles = (data, keyword) => {
  const extractedTitles = [];
  data.forEach((item) => {
    // if (item.name.includes(keyword)) {
    //   extractedTitles.push({ name: item.name, id: item.id });
    // }



    if (item.children) {
      item.children.forEach((child) => {
        // 检查子标题是否包含关键词
        if (child.name.includes(keyword)) {
          // 将关键字替换为带有高亮样式的字符串
          const highlightedName = child.name.replace(
            new RegExp(keyword, "gi"),
            (match) => `<span style="color: #4da5f2;">${match}</span>`
          );
          extractedTitles.push({
            name: `${item.name}/${highlightedName}`,
            id: child.id,
            web_path:child.web_path
          });
        }
      });
    }
  });

  return extractedTitles;
};

// 将文本中的关键字高亮显示
const highlightKeywords = (text) => {
  return text.replace(new RegExp(input2.value, "gi"), (match) => {
    return `<span style="color: #4da5f2;">${match}</span>`;
  });
};
//关闭弹窗
const handleClose = () => {
 drawer.value=false
  clearable();
};
//筛选后点击菜单

const Clickmenu=(val)=>{
      proxy.$store.getTitle(val.web_path);
      router.push(val.web_path);
      handleClose()
}
</script>

<style lang="less" scoped>
.conter_set {
  width: 100%;
  height: 500px;
  border: 1px solid;
}
.custom-dialog {
  height: 500px;
}
.constTitle {
  margin-left: 30px;
  margin-top: 10px;
  .content-ts {
    line-height: 35px;
    font-size: 14px;
    color: #333;
    font-weight: 700;
  }
  .title {
    font-size: 13px;
  }
}
.menus {
  padding-left: 30px;
  color: #333;
  height: 30px;
  align-items: center;
  display: flex;
  align-items: center; /* 垂直居中 */
}
.menus:hover{
    background-color: rgb(194, 227, 247);
    height: 30px;
}
</style>